import Icon from '@/components/Icon';
import { Text, View } from '@tarojs/components';
import { useRouter } from '@tarojs/taro';
import React, { useEffect, useState } from 'react';
import { connect } from 'react-redux';
import './index.scss';

const ShopPayResultPage = ({ dispatch }) => {
  const router = useRouter();
  const { params = {} } = router;
  const orderId = params.orderId;

  const [orderDetail, setOrderDetail] = useState({});

  const getOrderDetail = () => {
    dispatch({
      type: 'order/orderDetailModel',
      payload: { orderId },
    }).then((data) => {
      setOrderDetail(data);
    });
  };

  useEffect(() => {
    getOrderDetail();
  }, []);

  if (Object.keys(orderDetail).length == 0) {
    return null;
  }

  return (
    <View className="shopPayResult">
      <View className="item status">
        <Icon className="rltIcon" name="icon_sure" size={108} />
        <Text className="rltTxt">支付成功</Text>
        <Text className="realPay">
          {typeof orderDetail.totalPayment !== 'undefined' ? '￥' + orderDetail.totalPayment : ''}
        </Text>
        <Text className="orgPay">
          {typeof orderDetail.totalPrice !== 'undefined' ? '￥' + orderDetail.totalPrice : ''}
        </Text>
      </View>
      <View className="item detail">
        <View className="line">
          <Text className="lable">收款方</Text>
          <Text className="txt">
            {typeof orderDetail.storeName !== 'undefined' ? orderDetail.storeName : ''}
          </Text>
        </View>
        <View className="line">
          <Text className="lable">消费金额</Text>
          <Text className="txt">
            {typeof orderDetail.totalPrice !== 'undefined' ? orderDetail.totalPrice + '元' : ''}
          </Text>
        </View>

        <View className="line">
          <Text className="lable">积分抵扣</Text>
          <Text className="txt">
            {typeof orderDetail.totalPointAmount !== 'undefined'
              ? '-' + orderDetail.totalPointAmount + '元'
              : ''}
          </Text>
        </View>

        <View className="line">
          <Text className="lable">提货券</Text>
          <Text className="txt">
            {typeof orderDetail.discountAmount !== 'undefined'
              ? '-' + orderDetail.discountAmount + '元'
              : ''}
          </Text>
        </View>

        <View className="line">
          <Text className="lable">实付金额</Text>
          <Text className="txt">
            {typeof orderDetail.totalPayment !== 'undefined' ? orderDetail.totalPayment + '元' : ''}
          </Text>
        </View>
        <View className="line">
          <Text className="lable">支付时间</Text>
          <Text className="txt">
            {typeof orderDetail.paymentTime !== 'undefined' ? orderDetail.paymentTime : ''}
          </Text>
        </View>
        <View className="line">
          <Text className="lable">订单编号</Text>
          <Text className="txt">{typeof orderDetail.id !== 'undefined' ? orderDetail.id : ''}</Text>
        </View>

        <View className="line">
          <Text className="lable">备注</Text>
          <Text className="txt">
            {typeof orderDetail.customerRemark !== 'undefined' ? orderDetail.customerRemark : '无'}
          </Text>
        </View>
      </View>
    </View>
  );
};

export default connect(({}) => ({}))(ShopPayResultPage);
